<template>
  <div class="maincontent">
    <div class="x-nav">
      <el-tabs @tab-click="handleTabClick" v-model="activeName">
        <el-tab-pane label="基本信息" name="executiveCheck"></el-tab-pane>
        <el-tab-pane label="变更资料审查" name="blueprint"></el-tab-pane>
        <el-tab-pane label="附件审查" name="fujianIndex"></el-tab-pane>
        <el-tab-pane label="单体图审查" name="dantiMapIndex"></el-tab-pane>
        <el-tab-pane label="审查流程" name="checkProcess"></el-tab-pane>
      </el-tabs>
    </div>
    <component
      :is="currentComponent"
      :canEdit="canEdit"
      :linkName="linkName"
      :firstLinkName="firstLinkName"
    ></component>
  </div>
</template>

<script>
import executiveCheck from "./components/executiveCheck";
import blueprint from "./components/blueprint";
import checkProcess from "./components/checkProcess";
import fujianIndex from "./components/fujianIndex";
import dantiMapIndex from "./components/dantiMapIndex";
export default {
  components: {
    executiveCheck,
    blueprint,
    checkProcess,
    fujianIndex,
    dantiMapIndex
  },
  data() {
    return {
      currentComponent: executiveCheck,
      activeName: "executiveCheck",
      canEdit: true,
      linkName: "DESIGN_CHANGE_INFORMATION_CITY_CENTER_0",
      firstLinkName: ""
    };
  },
  methods: {
    handleTabClick: function(target) {
      this.currentComponent = target.name;
    }
  }
};
</script>

<style scoped="scoped" lang="scss">
.x-nav /deep/ .el-tabs__header {
  margin: 0;
}
.x-container {
  width: 100%;
  min-height: calc(100vh - 114px);
  padding: 20px;
  background: rgba(247, 248, 250, 1);
  .x-nav {
    background-color: #fff;
    padding-left: 20px;
  }
}
</style>
